<?php

use app\widgets\Alert;
use yii\bootstrap\ActiveForm;

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
use app\service\UrlService;
use app\service\StaticService;

?>
<?php $this->beginPage() ?>
<html lang="<?= Yii::$app->language ?>">

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>答题中--</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
 
    <link href="test.css" rel="stylesheet" type="text/css" />

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }
        .reading h2 a {
            text-decoration: none;
            color: #59595b;
            font-size: 20px;
        }
        .reading h2 a:hover {
            color: #2183f1;
        }
    </style>
</head>  

<?php $this->beginBody() ?>
    <div class="main">
<h2><?= $examname  ?></h2>
        <!--nr start-->
        <div class="test_main">
            <div class="nr_left">
                <div class="test"  style="margin-bottom:45px;">
                <?php $form = ActiveForm::begin(['action' => 'uppaper','method'=>'post', 'id'=>'testForm']); ?>
                        <div class="test_title">
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1"><?= $intime; ?></b>
                                
                            </p>

                            <font><input type="submit" value="交卷" id="submitbtn"></font>
                            <font><input type="button" id='keep' style="background:limegreen;
                            border-radius:5px;
                            color:white;margin-left:-15px;" value="保存试卷" title="保存后掉线重启，答题数据会保存"></font>
                        </div>

                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$radionumbers; ?></i><span>题，</span><span>合计</span><i class="content_fs"><?= $radionumbers*$selscore; ?></i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>
<!-- 单选题  -->
                            <?php foreach($examinationInfo['radio'] as $key => $value): ?>
                                <li id="radio_<?=$key ?>">
                                    <div class="test_content_nr_tt">
                                        <i><?=$key+1;?></i><span>(<?=$selscore;?>分)</span><font><?= $value['title'] ?>（  ）</font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                        <?php $rares = json_decode($value['options'],1);
                                         foreach($rares as $optionskey => $optionsvalue):
                                             $raname = 'radio['.Html::encode($key).']';
                                            $raval = $controlleroptions[Html::encode($optionskey)];
                                             ?>
                                            <li class="option">

                                                <label >
                                                <input type="radio" class="radioOrCheck" name="<?=$raname?>"
                                                       id="0_answer_1_option_1"  value="<?=$raval?>"
                                                    <?php if(isset($paperAnswer[$raname])&&
                                                        $raval==$paperAnswer[$raname]): ?>
                                                        <?php echo 'checked'; endif; ?>
                                                />


                                                    <?= Html::encode($controlleroptions[$optionskey])?>. 
                                                    <p class="ue" style="display: inline;"><?=Html::encode($optionsvalue);?></p>
                                                </label>
                                            </li>
                                        <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </li>
                            <?php endforeach; ?>

<!-- 单选题 end -->

                            </ul>
                        </div>
                        <input type="hidden" name="tid" value="<?= $uid; ?>">
                        <input type="hidden" name="paperid" value="<?= $paperid; ?>">
                        <input type="hidden" name="classid" value="<?= $classid; ?>">
                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>多选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$checkboxnumbers;?></i><span>题，</span><span>每题</span><i class="content_fs"><?=Html::encode($judscore);?></i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>
 <!--  左边多选题 -->        
                            <?php foreach($examinationInfo['checkbox'] as $k => $v): ?>
                                <li id="checkbox_<?=$k;?>">
                                    <div class="test_content_nr_tt">
                                        <i><?=$k+1;?></i><span>(<?=$chescore?Html::encode($chescore):'';?>分)
                                        </span><font><?=Html::encode($v['title'])?>()</font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <?php $relops = json_decode($v['options']); ?>
                                            <?php foreach ($relops as $key => $value):
                                                ?>
                                            <li class="option">
                                                <label>
                                                    <?php
                                                        $ckname = "checkbox[".$k."][]"; //键名
                                                        $ckv = Html::encode($controlleroptions[$key]); //值

                                                    ?>
                                                <input type="checkbox" class="radioOrCheck" name="<?=$ckname ?>[]"
                                                       id="1_answer_1_option_1" value="<?=$ckv?>"
                                                    <?php
                                                    if(isset($paperAnswer[$ckname])&&
                                                        in_array($ckv,$paperAnswer[$ckname])): ?>
                                                        <?= 'checked' ?>
                                                        <?php endif; ?>

                                                />
                                                    <p class="ue" style="display: inline;"> <?=$controlleroptions[$key]?>. <?=Html::encode($value);?></p>
                                                </label>
                                            </li>

                                            <?php endforeach ?>
                                          

                                        </ul>
                                    </div>
                                </li>
                            <?php endforeach; ?>
 <!--  左边多选题 end -->

                            </ul>
                        </div>

                        <!-- 判断 -->
                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?= $judgenumbers; ?></i><span>题，</span><span>合计</span><i class="content_fs"><?= $judgenumbers*$judscore; ?></i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>
                            <?php foreach ($examinationInfo['judge'] as $key => $value): ?>
                                
                            
                                <li id="judge_<?=$key;?>">
                                    <div class="test_content_nr_tt">
                                        <i><?= $key+1;?></i><span></span><font><?= Html::encode($value['title']); ?></font><b class="icon iconfont">&#xe881;</b>
                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>

                                            <li class="option">

                                                <label>
                                                    <?php $judname =  'judge['.Html::encode($key).']';?>
                                                <input type="radio" class="radioOrCheck" name="<?=$judname?>"
                                                       id="0_answer_1_option_1" value="1"
                                                    <?php if(isset($paperAnswer[$judname])&&
                                                        "1"===$paperAnswer[$judname]): ?>
                                                        <?php echo 'checked'; endif; ?>
                                                />
                                                    <p class="ue" style="display: inline;">√</p>
                                                </label>
                                            </li>

                                            <li class="option">

                                                <label >
                                                <input type="radio" class="radioOrCheck" name="<?=$judname?>"
                                                       id="0_answer_1_option_2"  value="0"
                                                    <?php if(isset($paperAnswer[$judname])&&
                                                        "0"===$paperAnswer[$judname]): ?>
                                                        <?php echo 'checked'; endif; ?>/>
                                                    <p class="ue" style="display: inline;">×</p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                </li>
                            <?php endforeach ?>
                            </ul>
                        </div>


                    <!-- 填空 -->
                <div class="test_content">
                    <div class="test_content_title">
                        <h2>填空题</h2>
                        <p>
                            <span>共</span><i class="content_lit"><?= Html::encode($completionnumbers); ?></i><span>题，</span><span>合计</span><i class="content_fs"><?= $completionnumbers*$cmpscore; ?></i><span>分</span>
                        </p>
                    </div>
                </div>
                <div class="test_content_nr">
                    <ul>
                    <?php foreach ($examinationInfo['completion'] as $key => $value): ?>
                        <li id="completion_<?=$key;?>">
                            <div class="test_content_nr_tt">
                                <i><?=$key+1 ?></i><span></span><font>
                                    <?= Html::encode($value['title']) ?></font><b class="icon iconfont">&#xe881;</b>
                            </div>

                            <div class="test_content_nr_main">
                                <ul>
                                    <?php for($i=0;$i<$value['inpnum'];$i++): ?>

                                    <li class="options">
                                       <div class="input-group">
                                        <span class="input-group-addon"><?= $i+1; ?>.</span>
                                           <?php $cmpname =  'completion['.$key.']['.$i.']';?>
                                        <input type="text" class="form-control" name="<?=Html::encode($cmpname)?>"
                                               style="padding:.5rem;"
                                            <?php if(isset($paperAnswer[$cmpname])): ?>
                                                <?php echo "value=".Html::encode($paperAnswer[$cmpname]); endif; ?>
                                        >
                                        </div>
                                    </li>
                                    
                                    <?php endfor; ?>
                                </ul>
                            </div>
                        </li>
                    <?php endforeach ?>
                    </ul>
                </div>
                <!-- 填空end  -->
                        <!--  大题  -->
                 <div class="test_content">
                    <div class="test_content_title">
                        <h2>简答题</h2>
                        <p>
                            <span>共</span><i class="content_lit"><?= $bossnumbers; ?></i><span>题，</span><span>合计</span><i class="content_fs"><?= $bossnumbers*$bosscore; ?></i><span>分</span>
                        </p>
                    </div>
                </div>
                <div class="test_content_nr">
                    <ul>
                    <?php foreach ($examinationInfo['boss'] as $key => $value): ?>
                        <li id="boss_<?=$key;?>">
                            <div class="test_content_nr_tt">
                                <i><?=$key+1 ?></i><span></span><font>
                                    <?= $value['title'] ?></font><b class="icon iconfont">&#xe881;</b>
                            </div>

                            <div class="test_content_nr_main">
                                <?php $boname = 'boss['.$key.']'; ?>
                               <textarea class="form-control" rows="10" style="width:100%;resize:none;" name="<?=$boname ?>"><?php
                                   echo (isset($paperAnswer[$boname]))? Html::encode($paperAnswer[$boname]) : '答：' ;
                                   ?></textarea>
                            </div>
                        </li>
                    <?php endforeach ?>
                    </ul>
                </div>
               <?php ActiveForm::end(); ?>
            </div>



<!--   右边部分 -->
            </div>
            <div class="nr_right">
                <div class="nr_rt_main">
                    <div class="rt_nr1">
                        <div class="rt_nr1_title">
                            <h1>
                                <i class="icon iconfont">&#xe692;</i>答题卡
                            </h1>
                            <p class="test_time">
                                <i class="icon iconfont">&#xe6fb;</i><b class="alt-1"><?= $intime; ?></b>
                            </p>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$radionumbers?></i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul id="radioborder">

                                    <li><a href="#qu_0_0">1</a></li>
                                    <!-- 右边单选题序号 -->

                                </ul>
                            </div>
                        </div>

                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>多选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$checkboxnumbers?></i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul id="checkboxborder">

                                    <li><a href="#qu_1_0">1</a></li>

                                <!--  右边多选题序号  -->
                                </ul>
                            </div>
                        </div>
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$judgenumbers?></i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul id="judgeborder">

                                    <li><a href="#qu_1_0">1</a></li>

                                <!--  右边多选题序号  -->
                                </ul>
                            </div>
                        </div>
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>填空题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$completionnumbers?></i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul id="completionborder">

                                    <li><a href="#qu_1_0">1</a></li>

                                <!--  右边多选题序号  -->
                                </ul>
                            </div>
                        </div>
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>大题</h2>
                                <p>
                                    <span>共</span><i class="content_lit"><?=$bossnumbers?></i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul id="bossborder">

                                    <li><a href="#qu_1_0">1</a></li>

                                <!--  右边多选题序号  -->
                                </ul>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
        <!--nr end-->


        <div class="foot"></div>

       
    </div>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
     
    </script>
    <script src="jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="time/jquery.countdown.js"></script>
    <script>
        
        window.jQuery(function ($) {
            "use strict";

            $('time').countDown({
                with_separators: false
            });
            $('.alt-1').countDown({
                css_class: 'countdown-alt-1'
            });
            $('.alt-2').countDown({
                css_class: 'countdown-alt-2'
            });

        });

        signfactory = function(type,n){/* li>a 标签工厂*/
            res = '';
            for(var i=0;i<n;i++){
                res+="<li><a href='#"+type+'_'+i+"' sign='"+type+'_'+i+"'>"+(i+1)+"</a></li>";
            }
            return res;
        }

        /* 考试时间设置*/
        $(function () {
            /* 添加题目标识 */
            radioborder = $('#radioborder');
            checkboxborder = $('#checkboxborder');
            judgeborder = $('#judgeborder');
            completionborder = $('#completionborder');
            bossborder = $('#bossborder');

            /* 添加最右边的题目标签 */
            radioborder.html(signfactory('radio',<?=$radionumbers;?>));
            checkboxborder.html(signfactory('checkbox',<?=$checkboxnumbers;?>));
            judgeborder.html(signfactory('judge',<?=$judgenumbers;?>));
            completionborder.html(signfactory('completion',<?=$completionnumbers;?>));
            bossborder.html(signfactory('boss',<?=$bossnumbers;?>));

            $('li.option label').click(function () {
                // debugger;
                
                var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); /*得到题目ID*/
                var cardLi = $("a[sign=" + examId + "]"); /*根据题目ID找到对应答题卡*/
                /*设置已答题*/
                if (!cardLi.hasClass('hasBeenAnswer')) {
                    cardLi.addClass('hasBeenAnswer');
                }

            });

        run(<?= $timeout;?>);


        });
        function run(time){
            /*@time  时长（秒）*/
            submitbtn = $('#submitbtn');//提交按钮
            testform = $('#testForm'); //getformDOM
            submitbtn.attr('type','button').css('background','#737d80').attr('title','考试最后30分钟才可交卷');
            house = parseInt(time/60);
            minute = parseInt(time%60);
            mSecond = parseInt(time*1000);//@msecond 考试时间，秒
            intime = house+':'+minute;
            timer = '';
            timers = time; //@var times 计时用的
            if(timers<=(30*60)){//如果考试剩余时间少于30分钟，可以让他交卷
                submitbtn.attr('type','submit').css('background','#389fc3').attr('title','可以提交试卷了');
            }else{
                //@var shenyut 剩余时间
                timer = setInterval(function(){
                    if(timers<=30*60){
                        submitbtn.attr('type','submit').css('background','#389fc3').attr('title','可以提交试卷了');
                        clearInterval(timer);
                    }
                    timers--;
                },1000);
            }
            //if it's time than submit paper；
            setTimeout(function(){
                $('#testForm').submit();
            },mSecond);

        }
        function fm(state){/* 状态*/
            return state;
        }
        var kp = {
            'data':'',
            'state':true,
            'uid':<?=$uid?>,
            'paperid':<?=$paperid;?>,
            'act':function(){
                if(this.state){
                    this.state = false;

                  $.ajax({
                      url:'<?=UrlService::BuildUrl('keeppaperdata') ?>',
                      type:'post',
                      datatype:'json',
                      data:{'data':this.data,
                          'uid':this.uid,
                          'paperid':this.paperid},
                      success:function(res){
                          alert('作答进度保存成功');
                          res.code == 200 ? alert(res.code) : '';
                          this.state = true;
                      },
                      error:function(){
                          this.state = true;
                      },
                  })
                }
            }
        }
        $('#keep').click(function(){
            var data = $('#testForm').serializeArray();
            kp.data = data;
            console.log(data);
            kp.act();

        });

    </script>



<?php $this->endBody() ?>

<?php $this->endPage() ?>

